<div ng-init="init();" class="kmi-layout-content B0214_F-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'B0214_F.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page left">
            <div class="kmi-list type-list none-column-split">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="padding:0 8px;" ng-bind="'B0214_F.typeList.column1' | translate"></div>
                    <!-- <div class="kmi-list__column" style="padding:0 8px;" ng-bind="'B0214_F.unselectList.column1' | translate" ></div> -->
                    <div class="kmi-text-fields" style="padding-right: 8px;">
                        <!--<input ng-model="queryType"/>-->
                        <input ng-model="filterItem.query_input" ng-keypress="searchEquipment($event);"></input>
                        <div class="tip search" ng-click="searchEquipment();"><i class="material-icons" style="background:transparent;">search</i></div>
                    </div>
                </div>
                <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat-start="item in typeList | filter : queryType track by $index" ng-click="clickTypeItem($index, item);"
                    ng-class="{'is-close':!item.showMachines}" style="padding-right: 12px;">
                    <i class="material-icons close">indeterminate_check_box</i>
                    <i class="material-icons open">add_box</i>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="item.page_no+' ('+item.page_name+') '" style="font-weight:600;"></div>
                    <div class="kmi-list__column" style="flex:0 0 90px;text-align:right;" ng-bind="'('+typeCountMap[item.page_no]+'/'+item.equipmentcount + ')'"></div>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="kmi-list inner-list none-scrollbar" ng-repeat-end ng-class="{'is-close':!item.showMachines}">
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="machine in item.unselectList | filter : filterUnselect track by $index" ng-click="clickUnselectItem($index, machine, item);">
                            <div class="kmi-list__column" style="flex:1;">{{machine.page_name + ' ('+machine.page_no+')'}}</div>
                            <div class="kmi-list__column-btn" >
                                <button class="mdl-button mdl-js-button mdl-button--icon" >
                                  <img src="image/icons/move4.png"></img>
                                </button>
                            </div>
                            <div class="kmi-can-click"></div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <!--
            <div class="kmi-list unselect-list">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:0 0 88px;padding-left:8px;" ng-bind="'B0214_F.unselectList.column1' | translate" ></div>
                    <div class="kmi-text-fields">
                        <input ng-model="queryUnselect"/>
                        <div class="tip"><img src="image/icons/search.png"></img> </div>
                    </div>
                </div>
                <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in unselectList | filter : queryUnselect track by $index" ng-click="clickUnselectItem($index, item);"
                    ng-class="{'ng-hide':selectMap[item.page_no]}">
                    <div class="kmi-list__column" style="flex:1;">{{item.page_name + ' ('+item.page_no+')'}}</div>
                    <div class="kmi-list__column-btn" >
                        <button class="mdl-button mdl-js-button mdl-button--icon" >
                          <img src="image/icons/move4.png"></img>
                        </button>
                    </div>
                    <div class="kmi-can-click"></div>
                </div>
                </div>
            </div>
            -->
        </div>
        <div class="kmi-layout-page right">
            <div class="kmi-list select-list none-column-split">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex:1;padding-left:8px;" ng-bind="'B0214_F.selectList.column1' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in selectList track by $index" ng-click="clickselectItem($index, item);">
                    <div class="kmi-list__column" style="flex:0 0 32px;padding: 0;" >
                        <button class="mdl-button mdl-js-button mdl-button--icon" >
                        <img src="image/icons/move5.png"></img>
                        </button>
                    </div>
                    <div class="kmi-list__column" style="flex:1;">{{item.machine_name + ' ('+item.machine_no+')'}}</div>
                    <div class="kmi-can-click"></div>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="kmi-layout-footer">
        <button class="mdl-button mdl-button--fab mdl-shadow--custom mdl-button--custom1"
            ng-click="confirm();">
            <i class="material-icons">done</i>
        </button>
    </div>
</div>
